<template>
  <div class="agreement_list_page">
    <div class="table_mod">
      <div class="title_box">
        <div class="title">
          <i class="icon"></i>
          平台协议设置
        </div>
        <el-button type="primary" @click="openMoreEditDialog">批量更新协议</el-button>
      </div>
      <el-table :data="tableData" class="table" v-loading="loading">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          v-bind="item"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a
              class="btn_text"
              :href="baseURL + scope.row.fileUrl"
              :download="scope.row.agreementName + '.' + scope.row.fileType"
            >查看</a>
            <el-button class="btn_text" type="text" @click="openSingleEditDialog(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :hidden="pagination.total === 0"
        :total="pagination.total"
        :page-size="pagination.pageSize"
        :current-page="pagination.pageNum"
        :limit="10"
        @pagination="paginationChange"
      />
    </div>
    <CustomDialog
      class="dialog"
      :title="dialogDataList.length > 1 ? '批量上传协议' : '协议编辑'"
      :visible="dialogVisible"
      width="70%"
      :buttonArray="[
        {
          text: '取消',
          clickFn: closeDialog
        },
        {
          text: '确定',
          loading: submitLoading,
          disabled: uploadAgreementList.length === 0,
          clickFn: submitEdit,
        },
      ]"
      @close="closeDialog"
    >
      <div class="content">
        <div class="list">
          <div class="item" v-for="item in dialogDataList" :key="item.id">
            <div class="name">{{ item.agreementName }}</div>
            <el-progress :percentage="item.percent" class="progress"></el-progress>
            <el-button class="btn" type="primary" :loading="item.loading">
              选择协议
              <input type="file" accept="application/pdf," class="upload_agreement" @change="agreementChange(item, $event)">
            </el-button>
          </div>
        </div>
      </div>
      <!-- <template slot="footer">
        <div class="btns">
          <el-button class="btn btn_cancel" @click="closeDialog">取 消</el-button>
          <el-button
            class="btn"
            type="primary"
            :disabled="uploadAgreementList.length === 0"
            :loading="submitLoading"
            @click="submitEdit"
          >确 定</el-button>
        </div>
      </template> -->
    </CustomDialog>
  </div>
</template>

<script>
import { agreementList, agreementEdit } from '@/api/agreement'
import { uploadImg } from "@/utils/request";
import Pagination from '@/components/Pagination'
import CustomDialog from '@/customComponents/dialog'

export default {
  components: {
    Pagination,
    CustomDialog,
  },
  data() {
    return {
      baseURL: process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_API : process.env.VUE_APP_HTTP_REQUEST_ADDRESS,
      columns: [],
      tableData: [],
      loading: false,
      pagination: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
      },
      dialogVisible: false,
      uploadAgreementList: [],
      dialogDataList: [],
      submitLoading: false,
    }
  },
  created() {
    this.columns = [
      {
        label: '序号',
        type: 'index'
      },
      {
        label: '协议类型',
        prop: 'agreementName', // agreementType
      },
      {
        label: '协议名称',
        prop: 'agreementName',
      },
      {
        label: '文件格式',
        prop: 'fileType',
      },
      {
        label: '签署方式',
        prop: 'signType',
      },
      {
        label: '更新时间',
        prop: 'updateTime',
      },
    ]
  },
  mounted() {
    this.getAgreementList()
  },
  methods: {
    // 获取协议列表
    getAgreementList() {
      this.loading = true
      agreementList({
        projectType: '0',
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      }).then((res) => {
        res.rows.forEach((item) => {
          item.loading = false
          item.percent = 0
        })
        this.tableData = res.rows
        this.pagination.total = res.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    paginationChange({ page: pageNum, limit: pageSize }) {
      this.pagination.pageNum = pageNum
      this.pagination.pageSize = pageSize
      this.getAgreementList()
    },
    // 打开单个协议编辑弹窗
    openSingleEditDialog(item) {
      this.dialogVisible = true
      this.dialogDataList = [item]
    },
    // 打开多个协议编辑弹窗
    openMoreEditDialog() {
      this.dialogVisible = true
      this.dialogDataList = this.tableData
    },
    // 选择协议文件
    agreementChange(item, e) {
      console.log(item, e)
      const file = e.target.files[0]
      e.target.value = ''
      // if (!this.imgValidate(file.type, file.size, 'signaturePicError', 'application/pdf')) {
      //   return
      // }
      if (file.size/1000/1024 > 10) {
        this.$message({
          type: 'error',
          message: '大小不超过10M'
        })
        return
      }
      item.percent = 0
      item.loading = true
      uploadImg("/common/upload", { file }, {
        onUploadProgress: (axiosProgressEvent) => {
          console.log(Math.round(axiosProgressEvent.loaded *  100 / axiosProgressEvent.total))
          item.percent = Math.round(axiosProgressEvent.loaded *  100 / axiosProgressEvent.total)
        }
      }).then((res) => {
        item.loading = false
        this.uploadAgreementList.push({
          id: item.id,
          fileUrl: res.fileName,
          fileType: file.type.split('/')[1],
          agreementName: res.originalFilename,
        })
      }).catch(() => {
        item.loading = false
      })
    },
    // 提交
    submitEdit() {
      this.submitLoading = true
      agreementEdit(this.uploadAgreementList).then((res) => {
        this.submitLoading = false
        this.$message({
          type: 'success',
          message: '提交成功',
          onClose: () => {
            this.closeDialog()
            this.getAgreementList()
          }
        })
      }).catch(() => {
        this.submitLoading = false
      })
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false
      this.uploadAgreementList = []
      this.dialogDataList = []
      this.tableData.forEach((item) => {
        item.percent = 0
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.mod {
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
  border-radius: 6px;
  margin-bottom: 16px;
  padding: 20px 16px 24px;
}
.agreement_list_page {
  .table_mod {
    @extend .mod;
    margin-bottom: 0;
    .title_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .title {
        color: #333;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        .icon {
          width: 3px;
          height: 16px;
          border-radius: 1px;
          background-color: $theme;
          margin-right: 5px;
        }
      }
    }
    .add_box {
      margin-bottom: 20px;
      display: flex;
      justify-content: flex-end;
    }
    .table {
      .btn_text {
        color: $theme;
        &:last-child {
          margin-left: 24px;
        }
      }
    }
  }
}
.dialog {
  font-size: 16px;
  .content {
    height: 60vh;
    padding: 20px;
    overflow-y: auto;
    .list {
      margin-bottom: 30px;
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        .name {
          width: 200px;
          margin-right: 24px;
        }
        .progress {
          flex: 1 1 auto;
        }
        .btn {
          flex-shrink: 0;
          margin-left: 24px;
          position: relative;
          .upload_agreement {
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            opacity: 0;
          }
        }
      }
    }

  }
  .btns {
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      width: 100px;
      cursor: pointer;
    }
    .btn_cancel {
      margin-right: 24px;
    }
  }
}
</style>
